import React from "react";

import "./index.scss";

interface IProps {
  width?: number | string;
}

const StoFilter: React.FC<IProps> = ({ width = "100%" }) => {
  return (
    <div className="wrapper" style={{ width }}>
      
      {/* 字符串-模糊搜索 */}
      <input className="item" type="text" placeholder="请输入用户姓名" />

      {/* 枚举-下拉过滤 */}
      <select className="item" name="sel-x" id="">
        <option value="">请选择性别</option>
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>

      {/* 测试换行效果 */}
      {/* <select className="item" name="sel-x" id="">
        <option value="">请选择性别</option>
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
      <select className="item" name="sel-x" id="">
        <option value="">请选择性别</option>
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
      <select className="item" name="sel-x" id="">
        <option value="">请选择性别</option>
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
      <select className="item" name="sel-x" id="">
        <option value="">请选择性别</option>
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select>
      <select className="item" name="sel-x" id="">
        <option value="">请选择性别</option>
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
      </select> */}

      {/* 数值-范围过滤 */}
      <div className="item range-box">
        <input type="number" placeholder="最小年龄" />
        <span>-</span>
        <input type="number" placeholder="最大年龄" />
      </div>

      {/* 空白 */}
      <div className="item"></div>

      {/* 搜索 + 重置 */}
      <div className="item btns">
        <button>搜索</button>
        <button>重置</button>
      </div>
    </div>
  );
};

export default StoFilter;
